<template>
  <el-card class="hr-block">
    <!-- <page-tools :show-before="false">
      <template v-slot:before>
        本月{{ tips.dateRange }}：社保在缴 {{ tips.socialSecurityCount }} 公积金在缴 {{ tips.providentFundCount }} 增员 {{
      tips.newsCount }} 减员 {{ tips.reducesCount }} 入职 {{ tips.worksCount }} 离职 {{ tips.leavesCount }}
      </template>
<template>
        <el-button size="mini" type="danger"
          @click="$router.push('/social_securitys/historicalArchiving')">历史归档</el-button>
        <el-button size="mini" type="primary"
          @click="$router.push(`/social_securitys/monthStatement?yearMonth=${yearMonth}`)">{{ yearMonth }}报表</el-button>
      </template>
</page-tools> -->
    <!-- 筛选组件 -->
    <social-tool @updateCity="handleCityUpdate" />
    <el-card class="hr-block">
      <el-table :data="list" style="width: 100%" :default-sort="{ prop: 'timeOfEntry', order: 'descending' }">
        <el-table-column type="index" width="50" label="序号" />
        <el-table-column prop="username" label="姓名" sortable />
        <el-table-column prop="mobile" label="手机" sortable />
        <el-table-column prop="workNumber" label="工号" sortable />
        <el-table-column prop="departmentName" label="部门" sortable width="180" />
        <el-table-column prop="timeOfEntry" label="入职时间" sortable />
        <el-table-column prop="timeOfOut" label="离职时间" sortable />
        <!-- <el-table-column prop="leaveTime" label="离职时间" sortable /> -->
        <el-table-column :formatter="getCity" prop="participatingInTheCityId" label="社保城市" width="180" />
        <el-table-column :formatter="getCity" prop="providentFundCityId" label="公积金城市" width="180" />
        <el-table-column :formatter="getBase" prop="socialSecurityBase" label="社保基数" />
        <el-table-column :formatter="getBase" prop="providentFundBase" label="公积金基数" />
        <el-table-column label="操作">
          <template v-slot:default="obj">
            <el-button type="text" size="mini" @click="$router.push(`/social/detail/${obj.row.id}`)">查看详情</el-button>
            <!-- <el-button type="text" size="mini" @click="test(obj.row.id)">111</el-button> -->
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-row type="flex" align="middle" justify="center" style="height: 60px">
      <el-pagination :total="total" :current-page="page.page" :page-size="page.pageSize" layout="prev, pager, next"
        @current-change="pageChange" />
    </el-row>
  </el-card>
</template>

<script>
import SocialTool from './components/social-tool'
import pageTools from './components/page-tools.vue'
import { getSocialList } from '@/api/social'
export default {
  components: { SocialTool, pageTools },
  data() {
    return {
      filteredList: [],
      list: [],
      total: 5,
      page: {
        pageNum: 1,
        pageSize: 10
      }
    }
  },
  created() {
    this.getSocialList1()
  },
  methods: {
    handleCityUpdate(eventData) {
      // 处理从子组件传递过来的数据
      console.log(`选中城市Id: ${eventData.citys}`);
      // 将字符串 '1,2' 转换为数字数组 [1, 2]
      console.log(eventData.citys);
      const jsonString = JSON.stringify(eventData.citys);
      const jsonString2 = JSON.stringify(eventData.citys2);
      const jsonString3 = JSON.stringify(eventData.departments);
      // 控制台输出 JSON 字符串
      console.log(jsonString);
      let cityIds = jsonString.split(',')
      let cityIds2 = jsonString2.split(',')
      let departments2 = jsonString3.split(',')
      cityIds = cityIds.map(item => {
        // 去除每个元素两边的空格，并去除可能的方括号
        return item.replace(/^\[|\]$/g, '');
      });
      cityIds2 = cityIds2.map(item => {
        // 去除每个元素两边的空格，并去除可能的方括号
        return item.replace(/^\[|\]$/g, '');
      });
      departments2 = departments2.map(item => {
        // 去除每个元素两边的空格，并去除可能的方括号
        return item.replace(/^\[|\]$/g, '');
      });
      console.log("this.filteredList", this.filteredList);
      this.list = this.filteredList
      this.list = this.list.filter(item => {
        if (jsonString.length === 2) {
          return true;
        }
        // console.log(item.prcityId);
        // console.log(cityIds);
        // console.log(cityIds.includes(item.prcityId));
        return cityIds.includes(item.prcityId);
      });
      const list2 = this.list
      this.list = list2.filter(item => {
        if (jsonString2.length === 2) {
          return true;
        }
        return cityIds2.includes(item.pacityId);
      });
      this.list = this.list.filter(item => {
        if (jsonString3.length === 2) {
          return true;
        }
        console.log(item.departmentId);
        console.log(departments2);
        console.log(departments2.includes(item.departmentId));
        return departments2.includes(item.departmentId);
      });
      // console.log(filteredList);
      console.log(cityIds);
      console.log(jsonString.length);
    },
    test(id) {
      console.log(id)
    },
    pageChange(page) {
      // 页码改变时的回调
      console.log('当前页:', page)
      this.page.pageNum = page
      const params = {
        pageNum: this.page.pageNum,
        pageSize: this.page.pageSize
      };
      this.getSocialList1(params).then(response => {
        // 处理响应数据
        console.log('social list:', response);
        // this.total = response.total;
        // this.list = response.list;
      })
        .catch(error => {
          // 处理错误情况
          console.error('Error fetching social list:', error);
        });
    },
    async getSocialList1(data) {
      getSocialList(data) // 假设你有一些查询参数存储在组件的data中
        .then(response => {
          // 处理响应数据
          console.log('social list:', response);
          this.total = response.total;
          this.list = response.list;
          this.filteredList = response.list;
        })
        .catch(error => {
          // 处理错误情况
          console.error('Error fetching social list:', error);
        });
    },
    getCity(row, column, cellValue, index) {
      return cellValue
    },
    getBase(row, column, cellValue, index) {
      return cellValue
    },
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.cont-bod-box {
  padding: 20px;
  background: #fff;
  border-radius: 3px;
  margin-top: 15px;
  margin-bottom: 15px;
  border: 1px solid #ebeef5;
}
</style>